<template>
  <view class="dy-scroll-container">
    <dy-navbar title="导航栏" />
    <scroll-view class="dy-scroll" scroll-y>
      <dy-card>
        <dy-section slot="title" padding="0" title="取消固定顶部" />
        <template slot="body">
          <dy-navbar title="取消fixed" :fixed="false" />
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title" padding="0" title="超长导航栏，自动剪裁添加省略号" />
        <template slot="body">
          <dy-navbar
            show-back
            through-title-width="400"
            title="超长导航栏，自动剪裁添加省略号"
            :fixed="false"
          />
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title" padding="0" title="自定义返回按钮" />
        <template slot="body">
          <dy-navbar back-icon-name="scan" :fixed="false" :show-back="true">
            自定义返回图标
          </dy-navbar>
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title" padding="0" title="自定义返回按钮" />
        <template slot="body">
          <dy-navbar back-icon-name="scan" back-text="后退" :fixed="false" :show-back="true">
            自定义返回名称
          </dy-navbar>
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title" padding="0" title="隐藏返回按钮" />
        <template slot="body">
          <dy-navbar :show-back="false" :fixed="false">隐藏返回按钮</dy-navbar>
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title" padding="0" title="自定义导航栏样式" />
        <template slot="body">
          <dy-navbar
            back-icon-name="scan"
            back-text="后退"
            background="linear-gradient(to right, #e0eafc, #cfdef3)"
            :fixed="false"
            :show-back="true"
          >
            自定义背景颜色
          </dy-navbar>
          <dy-navbar
            back-icon-name="scan"
            back-text="回退"
            background="#76b852"
            back-icon-color="#ffffff"
            :back-text-style="{ color: '#ffffff' }"
            title="自定义导航文字"
            :title-style="{ color: '#ffffff' }"
            :fixed="false"
            :show-back="true"
          />
        </template>
      </dy-card>
      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="插槽示例" />
        <template slot="body">
          <dy-navbar :fixed="false" :show-back="true">
            <view>默认插槽</view>
          </dy-navbar>
          <dy-navbar :fixed="false" title="左边插槽">
            <view slot="left" class="dy-pd-left-24 dy-icon-add dy-fz-46 dy-primary" />
          </dy-navbar>
          <dy-navbar :fixed="false">
            <view slot="title">标题靠左</view>
          </dy-navbar>
          <dy-navbar :fixed="false" title="右边插槽" :show-back="true">
            <view slot="right" class="dy-pd-right-24 dy-icon-add dy-fz-46 dy-primary" />
          </dy-navbar>
        </template>
      </dy-card>
      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="示例" />
        <template slot="body">
          <dy-navbar :fixed="false">
            <dy-search slot="title" show-action :action-style="{ paddingRight: '18rpx' }" />
          </dy-navbar>
          <dy-navbar :fixed="false">
            <dy-tabs v-model="demo2.currentItem" :items="demo2.tabItems" slider-bar-width="60" />
          </dy-navbar>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Navbar',
  data() {
    return {
      demo2: {
        currentItem: { id: 'member' },
        tabItems: [
          { id: 'member', text: '团员' },
          { id: 'masses', text: '群众' },
          { id: 'title', text: '标题' }
        ]
      }
    }
  }
}
</script>
